<%@page import="com.pb.poem.service.PoemService"%>
<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<% response.setHeader("P3P","CP=CAO PSA OUR");  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/poem.css" />
<link rel="stylesheet" href="css/pointing.css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/poem.js"></script>
<script type="text/javascript" src="js/guide.js"></script>
<script type="text/javascript" charset="utf-8"
	src="http://fusion.qq.com/fusion_loader?appid=100718929&platform=qzone">
</script>
<title>诗歌生成器</title>
</head>


<body id="poemApp">
	<br />
	<!--发布区-->
	<div id="create" title="发布区">
		<div id="edit" class="border" align="center">

			<table align="center" class="coll">
				<tr>
					<td colspan="2" align="center">诗歌生成器<br /> &nbsp;
					</td>
				</tr>
				<tr>
					<td>标题：</td>
					<td><input type="text" name="title" id="title" /></td>
				</tr>
				<tr>
					<td>关键字：</td>
					<td><input type="text" name="keyword" id="keyword" /></td>
				</tr>
				<tr>
					<td>诗歌类型：</td>
					<td><select name="Poemtype">
							<option value="五言绝句">五言绝句</option>
							<!-- <option value="七言律诗">七言律诗</option> -->
					</select></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<div id="poemmsg1" class="msg"></div>
						<input type="submit" name="btn" id="startbtn" class="btn" value="开始" />
					</td>
				</tr>
			</table>

		</div>
		<div id="poem">
			<div id="poemmsg2" class="msg"></div>
			<div id="mypoem" class="border" align="center"></div>
			<div id="show" align="center">
				<input type="button" name="next" class="btn" id="backbtn"  value="重新生成" />
				<input type="button" name="send" class="btn" id="sendbtn"  value="发布" />
			</div>
		</div>
	</div>

	<!--展示区-->
	<div id="showPoems" title="展示区">
		<!--tab按钮-->
		<div id="tab">
			<input type="image" src="images/allPoem.png" alt="全部" class="tabBtn" id="allpoems" />
			<input type="image" src="images/friendPoem.png" alt="好友" class="tabBtn" id="friendpoem" />
			<input type="image" src="images/myPoem.png" alt="自己" class="tabBtn" id="mypoems" />
			<input type="image" src="images/invite.png" alt="邀请" class="tabBtn" id="invite" />
		</div>
		<!--诗列表  -->
		<div id="pList">
			<!--第一列-->
			<div id="col1" class="col"></div>
			<!--第二列-->
			<div id="col2" class="col"></div>
			<!--第三列-->
			<div id="col3" class="col"></div>
			<!--加载更多-->
			<div class="more">
				<input type="button" class="btn" id="morePoems"  value="加载更多" />
			</div>
		</div>
	</div>
	
	<!--提示区  -->
	<div id="searchTipBg"
		style="width: 1212px; height: 588px; left: 0px; top: 0px; z-index: 999; background-color: rgb(0, 0, 0); opacity: 0.55; position: fixed; display: none;"></div>
	<div id="searchTip"
		style="left: 50%; top: 630px; z-index: 1005; background-color: transparent; position: absolute; margin-left: -145px; display: none;">
		<div id="step1" class="tipbox"
			style="visibility: visible; display: block;">
			<div class="tipword"></div>
			<span class="tipboxBtn" onclick="hideTip()"></span> <span
				class="tipboxNextbtn" onclick="nextStep(2)"></span>
			<ol class="progress">
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>
	<div id="searchTip2"
		style="left: 50%; top: 218px; z-index: 1005; background-color: transparent; position: absolute; margin-left: -145px; display: none;">

		<div id="step2" class="tipbox"
			style="visibility: hidden; display: none;">
			<div class="tipword"></div>
			<span class="tipboxBtn" onclick="hideTip()"></span> <a
				class="tipboxNextbtn" onclick="nextStep(3)" href="#stepflow03"></a>
			<ol class="progress">
				<li></li>
				<li class="on"></li>
				<li></li>
				<li></li>
			</ol>
		</div>

	</div>

	<div id="searchTip3"
		style="left: 26%; top: 317px; z-index: 1005; background-color: transparent; position: absolute; margin-left: -145px; display: none;">
		<div id="step3" class="tipbox"
			style="visibility: hidden; display: none;">
			<a name="top3" />
			<div class="tipword"></div>
			<span class="tipboxBtn" onclick="hideTip()"></span> <a
				class="tipboxNextbtn" onclick="nextStep(4)" href="#stepflow04"></a>
			<ol class="progress">
				<li></li>
				<li></li>
				<li class="on"></li>
				<li></li>
			</ol>
		</div>
	</div>

	<div id="searchTip4"
		style="left: 62%; top: 155px; z-index: 1005; background-color: transparent; position: absolute; margin-left: -145px; display: none;">
		<div id="step4" class="tipbox"
			style="visibility: hidden; display: none;">
			<div class="tipword"></div>
			<span class="tipboxBtn" onclick="hideTip()"></span> <a
				class="tipboxNextbtn" onclick="hideTip();noShow()" href="#"></a>
			<div class="notip">
				<input id="notip" type="checkbox" /> <label for="notip">不再提示</label>
			</div>
		</div>
	</div>
	<div class="tipbarwrap">
		<div class="tipbardiv">
			<div id="tipbar1" class="tipbar" style="display: none;">
				<div class="tipbarInner">
					<div class="arrow"></div>
					<div class="tipBarword"></div>
				</div>
			</div>
			<div id="tipbar2" class="tipbar" style="display: none;">
				<div class="tipbarInner">
					<div class="arrow"></div>
					<div class="tipBarword"></div>
				</div>
			</div>
			<div id="tipbar3" class="tipbar" style="display: none;">
				<div class="tipbarInner">
					<div class="arrow"></div>
					<div class="tipBarword"></div>
				</div>
			</div>
			<div class="tipSwitchAnimate tipSwitch"
				style="left: 410px; top: 15px; display: none;"></div>
		</div>
	</div>
	<div id="guide-step" style="top: 0px; position: absolute;">
		<div id="stepflow03"
			style="margin-top: 0px; height: 10px; line-height: 99em; overflow: hidden;">
			第二步骤</div>
		<div id="stepflow04"
			style="margin-top: -100px; height: 10px; line-height: 99em; overflow: hidden;">
			第三步骤</div>
			<div class="tipSwitch"></div>
	</div>
	<!-- 加载进度条 -->
	<div id="AjaxLoading" class="showbox" style="display:none;">
		<div class="loadingWord"><img src="images/waiting.gif" />诗正在生成中，请稍候...</div>
   	</div>
   	<!--版权信息  -->
   	<div id = "customerService" align="center">
   			<br/>
   			本 应 用 开 发 者：吕 恩 乐<br/>
			若 在 本 应 用 遇 到 问 题  请 QQ 咨 询: 252369706
	</div>
</body>
</html>
